<script src="../../config/index.js"></script>
<template>
  <div class="add">
    <div class="add-conten">
      <div class="head">
        <h2>新增中医文化热点信息</h2>
      </div>
      <div class="form">
        <div>
          <label>
            中医文化标题
          </label>
          <input type="text" v-model="hotspotTitle" placeholder="请输入">
        </div>

        <div>
          <label>
            中医文化来源
          </label>
          <input type="text" v-model="hotspotSource" placeholder="请输入">

          <label>
            作者
          </label>
          <input type="text" v-model="hotspotAuthor" placeholder="请输入">
        </div>
        <div>
          <label>中医文化介绍</label>
          <div id="div1"></div>
        </div>
        <div>
          <button type="button" @click="insertInfo" class="btn">提交</button>
          <button type="button" @click="close" class="btn">返回</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  import E from 'wangeditor'

  const axios=require("axios");
  var moment=require("moment");

  export default {
    name: 'AddChineseMedicineCulture',
    data(){
      return{

        dataStatus:'8',
        dataType:"3",
        hotspotAuthor:'',
        hotspotSource:'',
        hotspotTitle: '',
        hotspotContent:'',
      }
    },
    methods:{
      close(){
        this.$emit("closeAdd");
      },
      insertInfo(){
        var vm=this;
        axios.post('http://localhost:8852/insertTraditionalCultural',{
          dataStatus:'8',
          dataType:"3",
          hotspotAuthor:vm.hotspotAuthor,
          hotspotSource:vm.hotspotSource,
          hotspotTitle: vm.hotspotTitle,
          hotspotContent:vm.hotspotContent,
        })
          .then(function (res) {
            if(res.data.success){
              vm.$emit("getData")
              alert("添加成功")
              vm.close();
              vm.hotspotAuthor=''
              vm.hotspotSource=''
              vm.hotspotTitle= ''
              vm. hotspotContent=''
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },


    },
    mounted(){
      let editor = new E('#div1')
      editor.uploadImgShowBase64 = false // base 64 存储图片
      editor.config.onchange = (html) => {
        this.hotspotContent = html // 绑定当前逐渐地值
      }
      editor.create()
    }



  }
</script>
<style>

  *{margin:0;padding:0;}
  ul,ol,li{
    list-style-type: none;
  }
  .w {
    width: 1280px;
    margin: auto;
  }
  img{
    border: 0;
    vertical-align: middle;
  }

  a{
    text-decoration:none
  }


  .add{
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #4950577d;
  }

  .add-conten{width: 1200px; height:650px;overflow: hidden;position: absolute;top: 50%;left: 0;right: 0;margin:auto;border-radius: 8px;background-color: #fff;transform: translateY(-50%);-webkit-transform: translateY(-50%);}

  .add .add-conten .head h2{
    padding: 10px 0;
    text-align: center;
    color: #775637;
    font-size: 24px;
  }
  .add .add-conten .head{
    margin-bottom: 20px;
  }

  .add .add-conten .form>div label{
    display: inline-block;
    width: 200px;
    text-align: right;
    padding-right: 20px;
    font-size: inherit;
    height: 40x;
    line-height: 40px;
  }

  .add .add-conten .form>div{
    margin-bottom: 10px;
  }

  .add .add-conten .form>div input{
    padding-left: 10px;
    height: 40px;
  }

  .add .add-conten .form>div:nth-child(1) input{
    width: 790px;
  }

  .add .add-conten .form>div:nth-child(2) input{
    width: 274px;
  }
  .add .add-conten .form>div:nth-child(3){
    position: relative;
    height: 400px;
  }

  .add .add-conten .form>div:nth-child(4){
    margin: 0 auto;
    display: flex;
    align-items: center;
    width: 30%;
  }

  .add .add-conten #div1{
    position: absolute;
    margin-left: 5px;
    width: 800px;
    height: 400px;
    display: inline-block;
  }

  .add .btn{
    margin: 0 auto;
    display: inline-block;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: #D60000;
    border-color: #D60000;
  }

  .add .btn:hover{
    cursor: pointer;
    background-color: rgba(214, 0, 0, 0.68);
  }

</style>


